<section class="wsl-page-tab" id="wsl-team-tab-members">
  <div class="flex">
    <h2 class="flex-grow text-2xl font-semibold text-black dark:text-gray-300">
      Team Members
    </h2>
    <div class="print:hidden">
      <button
        type="button"
        (click)="invite()"
        class="wsl-btn-sm wsl-btn-primary group flex items-center space-x-1">
        <ng-icon
          class="inline h-4 opacity-75 group-hover:opacity-100"
          name="featherUserPlus" />
        <span>Invite Member</span>
      </button>
    </div>
  </div>
  <div *ngIf="countRows('member')">
    <div class="wsl-list-head">
      <h3 class="text-black dark:text-gray-300">Active Members</h3>
      <p>
        You have
        {{
          countShownRows('member')
            | i18nPlural
              : { '=0': 'no members', '=1': 'one member', other: '# members' }
        }}
        in your team.
      </p>
    </div>
    <ul class="wsl-box divide-y divide-gray-200 dark:divide-gray-700">
      <li
        class="wsl-list-item-outer first-of-type:rounded-t-md last-of-type:rounded-b-md hover:bg-gray-50 dark:hover:bg-gray-800"
        *ngFor="let item of getShownRows('member'); let i = index"
        (click)="selectedRow = i"
        [ngClass]="{ 'bg-sky-50 dark:bg-gray-700': selectedRow === i }">
        <app-team-item-member
          [item]="item.asMember()"
          [isTeamAdmin]="isTeamAdmin"
          [isSelf]="isSelf(item.asMember())"
          (confirmEdit)="confirmEdit($event)"
          (confirmRemove)="confirmRemove($event)" />
      </li>
    </ul>
  </div>
  <div *ngIf="countRows('invitee')">
    <div class="wsl-list-head">
      <h3 class="text-black dark:text-gray-300">Invited Members</h3>
      <p>
        You have invited
        {{
          countShownRows('invitee')
            | i18nPlural : { '=1': 'one user', other: '# users' }
        }}
        to your team.
      </p>
    </div>
    <ul class="wsl-box divide-y divide-gray-200 dark:divide-gray-700">
      <li
        class="wsl-list-item-outer first-of-type:rounded-t-md last-of-type:rounded-b-md hover:bg-gray-50 dark:hover:bg-gray-800"
        *ngFor="let item of getShownRows('invitee'); let i = index"
        (click)="selectedRow = i + countShownRows('member')"
        [ngClass]="{
          'bg-sky-50 dark:bg-gray-700':
            selectedRow === i + countShownRows('member')
        }">
        <app-team-item-invitee
          [item]="item.asInvitee()"
          [isTeamAdmin]="isTeamAdmin"
          (confirmRescind)="confirmRescind($event)" />
      </li>
    </ul>
  </div>
  <div *ngIf="countRows('applicant')">
    <div class="wsl-list-head">
      <h3 class="text-black dark:text-gray-300">Pending Members</h3>
      <p>
        {{
          countShownRows('applicant')
            | i18nPlural : { '=1': 'One user wants', other: '# users want' }
        }}
        to join your team.
      </p>
    </div>
    <ul class="wsl-box divide-y divide-gray-200 dark:divide-gray-700">
      <li
        class="wsl-list-item-outer first-of-type:rounded-t-md last-of-type:rounded-b-md hover:bg-gray-50 dark:hover:bg-gray-800"
        *ngFor="let item of getShownRows('applicant'); let i = index"
        (click)="
          selectedRow = i + countShownRows('member') + countShownRows('invitee')
        "
        [ngClass]="{
          'bg-sky-50 dark:bg-gray-700':
            selectedRow ===
            i + countShownRows('member') + countShownRows('invitee')
        }">
        <app-team-item-applicant
          [item]="item.asApplicant()"
          [isTeamAdmin]="isTeamAdmin"
          (confirmAccept)="confirmAccept($event)"
          (confirmDecline)="confirmDecline($event)" />
      </li>
    </ul>
  </div>
</section>
